<template>
	<checkbox-group @change="checkboxChange($event)" style="margin-top: 20rpx;">
		<view v-for="(item, ind) in rangeData" :key="item.id">
			<view style="font-size: 24rpx;">
				<checkbox @click="checkboxTips()" :disabled="selectName(item.value)" :value="item.value" style="transform:scale(0.6)" />
				{{item.value}}
			</view>
			
		</view>
	</checkbox-group>
</template>

<script>
	export default {
		name: 'MultipleCheckbox',
		data() {
			return {
				selectedItem: {},
				maxSelect: 10,
				rangeData: [],
				valueIndex: [],
			}
		},
		props: {
			range: {
				type: Array,
				default: () => []
			},
			name: {
				type: String,
				default: 'name',
			},
			child: {
				type: String,
				default: 'child',
			},
			value: {
				type: Array,
			}
		},
		methods: {
			selectName(name) {
				if (this.maxSelect > 0 &&
					this.maxSelect == Object.keys(this.selectedItem).length) {
					for (var t in this.selectedItem) {
						if (t == name) {
							return false
						}
					}
					return true
				} else {}
				return false
			},
			checkboxTips() { //多选提示
				if (
					this.maxSelect == Object.keys(this.selectedItem).length) {
					uni.showToast({
						title: "做多选择" + this.maxSelect + "项",
						icon: "none"
					})
			
				}
			},
			//多选
			checkboxChange: function(evt) {
				var objectA = {}
				var arr = []
				for (let i = 0; i < this.rangeData.length; i++) {
					for (let j = 0; j < evt.target.value.length; j++) {
						if (this.rangeData[i].value === evt.target.value[j]) {
							var objectB = this.rangeData[i];
							this.$set(objectA, evt.target.value[j], objectB)
							arr.push(this.rangeData[i].value)
							break;
						}
					}
				}
				this.selectedItem = objectA;
				this.$emit('selected', arr)
			},
		},
		watch: {
			range: {
				handler(val) {
					this.rangeData = val;
				},
				immediate: true
			}
		},
	}
</script>

<style>
</style>
